<template>
  <div class="dashboard-container" style="margin-top: 70px">
    <el-row :gutter="20" class="row">
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <p>机构概述</p>
          <el-row class="content">
            <el-col :span="12" class="left-content">
              <div class="name">{{ organOverview.organName }}</div>
              <!-- <div class="name">西三旗分拣中心</div> -->
              <div class="address">地址：{{ organOverview.organAddress }}</div>
              <div class="duty-people">负责人：{{ organOverview.principal }} {{ organOverview.sphone }}</div>
              <el-button type="danger" plain>查看营业部分布</el-button>
            </el-col>
            <el-col :span="12">
              <div class="right-content">
                <el-row>
                  <el-col :span="12">
                    <div class="label">分拣中心(个)</div>
                    <div class="num">{{ organOverview.sortingCenterNumber }}</div>
                  </el-col>
                  <el-col :span="12">
                    <div class="label">营业部(个)</div>
                    <div class="num">{{ organOverview.agencyNumber }}</div>
                  </el-col>
                </el-row>
              </div>
              <div class="right-content">
                <el-row>
                  <el-col :span="12">
                    <div class="label">司机人数(个)</div>
                    <div class="num">{{ organOverview.driverNumber }}</div>
                  </el-col>
                  <el-col :span="12">
                    <div class="label">快递员人数(个)</div>
                    <div class="num">{{ organOverview.courierNumber }}</div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!-- 今日数据 -->
      <el-col :span="10">
        <!-- <today-data :today-data="todayData" /> -->
        <today-data />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="row">
      <el-col :span="14">
        <!-- 待执行任务 -->
        <to-do-tasks />
      </el-col>
      <el-col
        :span="10"
      ><!-- 执行中任务 -->
        <underway-tasks />
      </el-col>
    </el-row>

    <!-- 常用功能 -->
    <el-row :gutter="20" class="row">
      <el-col :span="24">
        <often-function />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="row">
      <el-col :span="12">
        <!-- 线路管理 -->
        <line-manage />
      </el-col>
      <el-col :span="12">
        <!-- 运输任务 -->
        <taranspor-task />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="row">
      <el-col :span="12">
        <!-- 订单总量 -->
        <order-gross />
      </el-col>
      <el-col :span="12">
        <!-- 订单分布 -->
        <order-distribute />
      </el-col>
    </el-row>
    <div class="bottom"><span>注：工作台展示数据为虚拟数据</span></div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import LineManage from './components/lineManage.vue'
import OftenFunction from './components/oftenFunction.vue'
import OrderDistribute from './components/orderDistribute.vue'
import OrderGross from './components/orderGross.vue'
import TaransporTask from './components/taransporTask.vue'
import todayData from './components/todayData.vue'
import ToDoTasks from './components/toDoTasks.vue'
import UnderwayTasks from './components/underwayTasks.vue'
// import { getWorkspace } from '@/api/dashboard'
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  components: { todayData, ToDoTasks, UnderwayTasks, OftenFunction, LineManage, TaransporTask, OrderGross, OrderDistribute },
  // data() {
  //   return {
  //     getList: {}, // 机构概述
  //     todayData: {}, // 今日数据
  //     backlog: {}
  //   }
  // },
  computed: {
    ...mapGetters(['organOverview'])
  }
  // created() {
  //   // this.get()
  //   this.$store.dispatch('dashboard/getWorkspace')
  // },
  // methods: {
  // async get() {
  //   const res = await getWorkspace()
  //   console.log(res)
  //   this.getList = res.data.organOverview
  //   this.todayData = res.data.todayData
  //   // this.backlog = res.data.backlog
  //   // console.log(this.getList)
  // }
  // }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    background-color: #f3f5f9;
  }
}
// 格栅布局样式
.el-row {
  margin-bottom: 20px;
}
.bg-purple {
  background: #fff;
}
.grid-content {
  // height: 230px;
  border-radius: 4px;
  min-height: 36px;
  font-size: 16px;
  padding: 23px 20px;
  p{
    font-weight: 700;
  }
  //机构概括
.content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  .left-content {
    padding-left: 10px;
    // flex: 50%;
    border-right: 1px solid #ebeef5;
    .name {
      font-size: 16px;
      margin-top: 20px;
      margin-bottom: 13px;
    }
    .address {
      font-size: 14px;
      color: #818693;
      margin-bottom: 8px;
    }
    .duty-people {
      font-size: 14px;
      color: #818693;
      margin-bottom: 23px;
    }
  }
  .right-content {
    display: flex;
    flex: 50%;
    width: 300px;
    .el-row {
      flex: 50%;
      // // align-items: center;
      // display: flex;
      .label {
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;
      }
      .num {
        font-size: 32px;
        font-weight: 700;
        color: #e15536;
        cursor: pointer;
        text-align: center;
      }
    }
  }
}
}
.bottom{
  span{
    font-size: 13px;
    color: #818693;
    float: right;
    margin-right: 7px;
    margin-bottom: 10px;
  }
}
</style>
